<template>
  <div>
    <h2>添加联系人</h2>
    <div class="form">
      <label for="name">
        <span>姓名</span>
        <input
          type="text"
          id="name"
          v-model="name"
          :class="{ error: nameIn }"
          placeholder="请输入姓名"
        />
        <em v-show="nameIn">*姓名不能为空且只能由字母、数字、下划线组成</em>
      </label>
      <label for="tel">
        <span>电话号码</span>
        <input
          type="text"
          id="tel"
          v-model="tel"
          :class="{ error: telIn }"
          placeholder="请输入电话号码"
        />
        <em v-show="telIn">*不能为空且全部为数字组成</em>
      </label>
      <label>
        <span>与我的关系</span>
        <select v-model="status">
          <option selected>朋友</option>
          <option>亲人</option>
          <option>同学</option>
        </select>
      </label>
      <label>
        <span></span>
        <button
          :class="{ nomal: true, btn: save }"
          @click.stop="add"
          :disabled="save"
        >
          添 加
        </button>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      tel: "",
      status: "亲人",
    };
  },
  methods: {
    add(ev) {
      if (this.name && this.tel) {
        this.$emit("add", {
          name: this.name,
          tel: this.tel,
          status: this.status,
        });
        this.name = "";
        this.tel = "";
      } else {
        if (!this.name) this.name = "请输入姓名";
        if (!this.tel) this.tel = "请输入电话号码";
      }
    },
  },
  computed: {
    //姓名正则校验
    nameIn() {
      return /\W/g.test(this.name);
    },
    //电话正则校验
    telIn() {
      return /\D/g.test(this.tel);
    },
    save() {
      // 符合规范返回false
      var result = this.nameIn || this.telIn;
      return result;
    },
  },
};
</script>

<style scoped>
@import "../assets/css/addCon.css";
</style>
